// 项目中可复用的数据和逻辑方法
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// apiCallBack页面中请求的方法，回调函数（进入可视区域执行）
export function useObserve (apiCallBack) {
  // 获取监控的元素（组件）
  const target = ref(null)
  // 执行监控
  // useIntersectionObserver函数的返回值是个对象，对象中的stop方法可以停止监控
  // useIntersectionObserver（target:监控的daom对象或组件实例，
  // callback：被监控对象进入可是区域执行的回调函数
  // options？：配置监控行为，？是ts语法，代表非必传
  // 当前组件进入可视区，发请求获取数据
  // 根据useIntersectionObserver监控函数的回调中的isIntersecting判断实现
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是个数组：解构出数组中对象的isIntersecting的值,用来判断元素是否进入可视区域
      console.log(isIntersecting)
      if (isIntersecting) {
        // 发请求
        apiCallBack()
        // 发完,停止监控
        stop()
      }
    },
    {
      threshold: 0
    }
  )
  // 返回元素的监控变量
  return { target }
}
